﻿<UserControl x:Class="Chapters.Chapter05.AnimatedTabControl"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:Chapter05="clr-namespace:FSharp.Chapter5;assembly=FSharpLibrary">
	<UserControl.Resources>
		<Style x:Key="{x:Type TabItem}"
			   TargetType="TabItem">
			<Setter Property="Width"
					Value="50" />
			<Setter Property="Height"
					Value="30" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="TabItem">
						<Grid>
							<Rectangle RadiusX="5"
									   RadiusY="5"
									   Stroke="Black"
									   Fill="#cccccc" />
							<Rectangle x:Name="HilightRect"
									   RadiusX="5"
									   RadiusY="5"
									   Fill="IndianRed"
									   Opacity="0"
									   Margin="1" />
							<ContentPresenter Content="{TemplateBinding Header}"
											  VerticalAlignment="Center"
											  HorizontalAlignment="Center">
							</ContentPresenter>
						</Grid>

						<ControlTemplate.Triggers>
							<Trigger Property="IsSelected"
									 Value="True">
								<Trigger.EnterActions>
									<BeginStoryboard>
										<Storyboard>
											<DoubleAnimation From="0"
															 To="1"
															 Storyboard.TargetProperty="Opacity"
															 Storyboard.TargetName="HilightRect"
															 Duration="0:0:1" />
										</Storyboard>
									</BeginStoryboard>
								</Trigger.EnterActions>

								<Trigger.ExitActions>
									<BeginStoryboard>
										<Storyboard>
											<DoubleAnimation From="1"
															 To="0"
															 Storyboard.TargetProperty="Opacity"
															 Storyboard.TargetName="HilightRect"
															 Duration="0:0:0.5" />
										</Storyboard>
									</BeginStoryboard>
								</Trigger.ExitActions>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<Style x:Key="{x:Type TabControl}"
			   TargetType="TabControl">
			<Setter Property="VerticalContentAlignment"
					Value="Stretch" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="TabControl">
						<Grid>
							<Grid.RowDefinitions>
								<RowDefinition Height="Auto" />
								<RowDefinition Height="40" />
								<RowDefinition />
							</Grid.RowDefinitions>

							<UniformGrid x:Name="_stageEltContainer"
										 Grid.Row="0"
										 Rows="1"
										 IsItemsHost="True" />
							<Chapter05:StageIndicator Grid.Row="1"
														  Background="#5FFF0000"
														  BorderBrush="#5F000000"/>
							<ContentPresenter x:Name="TabContent"
											  Grid.Row="2"
											  Content="{TemplateBinding SelectedContent}">

							</ContentPresenter>
						</Grid>

						<ControlTemplate.Triggers>
							<EventTrigger RoutedEvent="Selector.SelectionChanged">
								<BeginStoryboard>
									<Storyboard>
										<DoubleAnimation From="0.25"
														 To="1"
														 Storyboard.TargetProperty="Opacity"
														 Storyboard.TargetName="TabContent"
														 Duration="0:0:0.5" />
									</Storyboard>
								</BeginStoryboard>
							</EventTrigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>
	<Grid>
		<TabControl>
			<TabItem Header="Stage-1">
				<Button>Hello 1</Button>
			</TabItem>
			<TabItem Header="Stage-2">
				<Button>Hello 2</Button>
			</TabItem>
			<TabItem Header="Stage-3">
				<Button>Hello 3</Button>
			</TabItem>
			<TabItem Header="Stage-4">
				<Button>Hello 4</Button>
			</TabItem>
			<TabItem Header="Stage-5">
				<Button>Hello 5</Button>
			</TabItem>
		</TabControl>
	</Grid>
</UserControl>
